<template>
  <div class="oneStroke">
    <!-- 日历 -->
     <div class="calendar">
       <van-calendar v-model:show="show" type="single" @confirm="onConfirm" switch-mode="month" color="rgb(181, 202, 161)"
         :show-confirm="false" :formatter="formatter" />
     </div>
    <!-- 顶部 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar>
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
          <template #title>
            <van-tabs v-model:active="active" @click-tab="changeCategoryList($event)" type="card" color="rgb(46,53,72)">
              <van-tab title="支出"></van-tab>
              <van-tab title="收入"></van-tab>
            </van-tabs>
          </template>
          <template #right>
            <van-icon name="setting" size="18" color="black" />
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <div class="category">
        <div class="category-item" v-for="item in categoryListA" :key="item.id" v-if="changeCategoryListVal == '0'">
          <div class="category-icon" :class="{ active: item.active }" @click="changeCategory(item)">
            <van-image :src="item.icon"></van-image>
          </div>
          <div class="category-text">{{ item.text }}</div>
        </div>

        <div class="category-item" v-for="item in categoryListB" :key="item.id" v-if="changeCategoryListVal == '1'">
          <div class="category-icon" :class="{ active: item.active }" @click="changeCategory(item)">
            <van-image :src="item.icon"></van-image>
          </div>
          <div class="category-text">{{ item.text }}</div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="main-b">
      <!-- 小工具栏 -->
      <div class="tool-box">
        <div class="tool-item">
          <div class="tool-icon">
            <van-image :src="exampleBillImage_13"></van-image>
          </div>
          <div class="tool-text" @click="show = true">{{ date }}</div>
        </div>
      </div>
      <!-- 录入栏 -->
      <div class="enter-box">
        <!-- 输入框 -->
        <div class="enter-input">
          <div class="input">
            <van-cell-group inset>
              <van-field v-model="notesVal" placeholder="请输入备注信息 (最多150字)" />
            </van-cell-group>
          </div>
          <div class="amout" ref="amoutDOM">{{ inputVal }}</div>
        </div>
        <!-- 数字框 -->
        <div class="enter-num">
          <div class="enter-key" @click="keyNumInput('1')">1</div>
          <div class="enter-key" @click="keyNumInput('2')">2</div>
          <div class="enter-key" @click="keyNumInput('3')">3</div>
          <div class="enter-key" @click="backspace()"><van-image class="key-image" :src="exampleBillImage_14" /></div>
          <div class="enter-key" @click="keyNumInput('4')">4</div>
          <div class="enter-key" @click="keyNumInput('5')">5</div>
          <div class="enter-key" @click="keyNumInput('6')">6</div>
          <div class="enter-key" @click="add()"><van-image class="key-image" :src="exampleBillImage_15" /></div>
          <div class="enter-key" @click="keyNumInput('7')">7</div>
          <div class="enter-key" @click="keyNumInput('8')">8</div>
          <div class="enter-key" @click="keyNumInput('9')">9</div>
          <div class="enter-key" @click="minus()"><van-image class="key-image" :src="exampleBillImage_16" /></div>
          <div class="enter-key enter-key-text">再记</div>
          <div class="enter-key" @click="keyNumInput('0')">0</div>
          <div class="enter-key" @click="keyPointInput()">.</div>
          <div class="enter-key enter-key-text" v-if="model == 0">保存</div>
          <div class="enter-key enter-key-text" v-if="model == 1" @click="cal()"><van-image class="key-image"
              :src="exampleBillImage_17"></van-image></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="OneStroke">
// 记一笔
import { ref, reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import useCategory from '@/hooks/useCategory'
import type { Category } from '@/hooks/useCategory' // 导入类型

// 导入图标
import exampleBillImage_13 from '@/icon/069_日历.svg'

import exampleBillImage_14 from '@/icon/070_回车.svg'
import exampleBillImage_15 from '@/icon/070_加号.svg'
import exampleBillImage_16 from '@/icon/070_减号.svg'
import exampleBillImage_17 from '@/icon/070_等于.svg'

import exampleBillImage_18 from '@/icon/068_设置.svg'

import { showToast } from 'vant'

const active = ref(0)

// 支出分类
let { categoryListA, categoryListB } = useCategory()

const router = useRouter()

addSetting(categoryListA)
addSetting(categoryListB)

function addSetting(categoryList: any) {
  categoryList.push({
    id: 'setting01',
    icon: exampleBillImage_18,
    text: '设置',
    active: false
  })
}

// 返回上一级
function back() {
  router.go(-1)
}

// 被选中的分类列表
let changeCategoryListVal = ref('0')

// 切换分类列表
function changeCategoryList(value: any) {
  changeCategoryListVal.value = value.name
}

// 被选中的分类
let changeCategoryVal = reactive(categoryListA[0])

// 选中分类
function changeCategory(category: Category) {
  // 将所有的分类active属性都设置为false
  // for(let i = 0;i< categoryList.length;i++){
  //   categoryList[i].active = false
  // }

  // 如果选中设置，则直接跳转
  if (category.text == '设置') {
    router.push('/categorySet')
    return
  }

  // 设置上一个被选中的分类的属性
  changeCategoryVal.active = false
  // 更新最新选中的分类的属性
  category.active = true
  // 更新被选中的分类
  changeCategoryVal = category

  // 被选中的分类
  console.log(category)
}

// 输入框
let inputVal = ref<string>("0.00") // 金额
let notesVal = ref("") // 备注

// 模式 0 输入 1计算 
let model = ref(0)

// 监视输入框内是否有运算符
watch(inputVal, (value) => {
  console.log(value)
  if (inputVal.value.indexOf('+') != -1 || inputVal.value.indexOf('-') != -1) {
    model.value = 1
  } else {
    model.value = 0
  }
})

// 小键盘
function keyNumInput(value: string) {
  // 如果初始为0.00 则直接赋值
  if (inputVal.value == '0.00') {
    inputVal.value = value
  } else {

    // 限制位数
    // 小数点前8位
    // 小数点后2位
    let pointIndex = inputVal.value.indexOf('.') // 可能为-1 

    let limit = 8 // 整数限制位数
    let floatLimit = 2 // 小数限制位数

    // 如果存在 运算符 号，则整数限制提高到15位(+7位)
    let varLimit = inputVal.value.indexOf('+') != -1 || inputVal.value.indexOf('-') != -1 ? 7 : 0

    // 小数点后的数
    let nextPointVal: string | number = 0

    // 如果是 -1 整串都是整数
    // 如果不为-1，则加上 小数位数
    if (pointIndex != -1) {
      // 如果为加法模式，需要分别计算 加号 两边的小数点后位数
      // 如果为+法

      if (inputVal.value.indexOf('+') != -1) {
        // 封装的方法
        if (!calModelLimit(pointIndex, '+', value)) {
          return
        }
      } else
        // 如果为减法
        if (inputVal.value.indexOf('-') != -1) {
          // 封装的方法
          if (!calModelLimit(pointIndex, '-', value)) {
            return
          }
        }

        // 这两种都不是，则为普通输入模式 
        else {
          // 输入模式，只需判断一位
          nextPointVal = inputVal.value.slice(pointIndex + 1, inputVal.value.length)
          console.log("第一位小数点后：" + nextPointVal)
          if (nextPointVal.length >= floatLimit) {
            showToast({
              message: '只能输入两位小数',
              position: 'top',
            })
            return
          }
        }
    } else {
      // 整数限制
      // -1 或者 小数点坐标前 限制8位
      if (inputVal.value.length >= limit + varLimit) {
        showToast({
          message: '金额长度不能超过8位',
          position: 'top',
        })
        return
      }
    }

    // 加上数字
    inputVal.value += value
  }
}

// 封装的限制方法
function calModelLimit(pointIndex: number, operator: string, value: string) {
  console.log(pointIndex)
  console.log(inputVal.value.indexOf(operator))


  let nextPointVal: string | number = 0 // 小数点后的数
  let limit = 8 // 整数限制位数
  let floatLimit = 2 // 小数限制位数
  let varLimit = inputVal.value.indexOf(operator) != -1 ? 7 : 0


  // 情况一：有两个 小数点 
  // 第二位为第二个 . 到最后一格
  if (inputVal.value.indexOf('.') != inputVal.value.lastIndexOf('.')) {
    console.log('情况1')
    nextPointVal = inputVal.value.slice(inputVal.value.lastIndexOf('.') + 1, inputVal.value.length)
    console.log("第二位小数点后：" + nextPointVal)
    if (nextPointVal.length >= floatLimit) {
      showToast({
        message: '只能输入两位小数',
        position: 'top',
      })
      return false
    }
  }
  // 情况二：只有一小数点，小数点在 右边
  // 如果第二个不存在，并且.的位置比[运算符]的位置靠后,则表示第一个数为整数，
  else if (inputVal.value.indexOf('.') > inputVal.value.indexOf(operator)) {
    console.log('情况2')
    // 复用输入模式的判断，只判断一位
    nextPointVal = inputVal.value.slice(pointIndex + 1, inputVal.value.length)
    console.log("第一位小数点后：" + nextPointVal)
    if (nextPointVal.length >= floatLimit) {
      showToast({
        message: '只能输入两位小数',
        position: 'top',
      })
      return false
    }
  }
  // 情况三：只有一小数点，小数点在 左边
  // 如果 .的位置比[运算符]的位置靠前，则表示第二个数为正数
  // 调用整数限制
  else if (inputVal.value.indexOf('.') < inputVal.value.indexOf(operator)) {
    console.log('情况3')
    if (inputVal.value.length >= limit + varLimit) {
      showToast({
        message: '金额长度不能超过8位',
        position: 'top',
      })
      return false
    }
  }

  // 加上数字
  inputVal.value += value
}

// 小数点
function keyPointInput() {
  // 如果为计算模式，则可以添加两个 . 
  if (inputVal.value.indexOf('+') != -1 || inputVal.value.indexOf('-') != -1) {
    // 如果已经存在 2个 . 则不添加
    if (inputVal.value.split('.').length >= 3) {
      return
    }
    // 如果最后一个是 . 则不添加
    if (inputVal.value.lastIndexOf('.') == inputVal.value.length - 1) {
      return
    }
  }
  // 输入模式只能添加一个
  else if (inputVal.value.indexOf('.') != -1) {
    return
  }
  // 当 最后一位不是 + 或- 号时，添加上.
  if (inputVal.value[inputVal.value.length - 1] != '+' && inputVal.value[inputVal.value.length - 1] != '-') {
    inputVal.value += '.'
  }
}

// 回格键
function backspace() {
  if (inputVal.value == '0.00') {
    return
  }
  inputVal.value = inputVal.value.slice(0, inputVal.value.length - 1)
  if (inputVal.value == '') {
    inputVal.value = '0.00'
  }
}

// 加号
function add() {
  // 如果最后一位是-号
  if (inputVal.value.indexOf('-') == inputVal.value.length - 1) {
    inputVal.value = inputVal.value.slice(0, inputVal.value.length - 1) + '+' // 替换
    return
  }

  // 如果存在否存在其他符号
  if (inputVal.value.indexOf('-') != -1) {
    cal() // 调用运算
    inputVal.value += '+' // 加上 + 号  
  }

  if (inputVal.value.indexOf('+') == -1) {
    inputVal.value += '+'
  } else {
    // 如果已经存在+号，并且+号不是最后一位，则直接调用运算，再加上+号
    if (inputVal.value[inputVal.value.length - 1] != '+') {
      cal() // 调用运算
      inputVal.value += '+' // 加上 + 号
    }
  }
}

// 减号
function minus() {
  // 如果最后一位是+号
  if (inputVal.value.indexOf('+') == inputVal.value.length - 1) {
    inputVal.value = inputVal.value.slice(0, inputVal.value.length - 1) + '-' // 替换
    return
  }

  // 如果存在否存在其他符号
  if (inputVal.value.indexOf('+') != -1) {
    cal() // 调用运算
    inputVal.value += '-' // 加上 - 号  
  }

  if (inputVal.value.indexOf('-') == -1) {
    inputVal.value += '-'
  } else {
    // 如果已经存在-号，并且-号不是最后一位，则直接调用运算，再加上-号
    if (inputVal.value[inputVal.value.length - 1] != '-') {
      cal() // 调用运算
      inputVal.value += '-' // 加上 + 号
    }
  }
}

// 运算
function cal() {
  let flag = 0  // 加减标识
  let symbol = -1 // 下标
  let num1 = ref(0) // 数字1
  let num2 = ref(0) // 数字2

  // 检查符号是什么
  if (inputVal.value.indexOf('+') != -1) {
    // 符号是加
    flag = 0
    symbol = inputVal.value.indexOf('+')
  } else {
    // 符号是减
    flag = 1
    symbol = inputVal.value.indexOf('-')
  }

  num1.value = parseFloat(inputVal.value.slice(0, symbol))
  num2.value = parseFloat(inputVal.value.slice(symbol + 1, inputVal.value.length))

  console.log('num1 :: ' + num1.value)
  console.log('num2 :: ' + num2.value)

  // 处理最后一位为符号的通解
  if (isNaN(num2.value)) {
    return
  }

  // 计算
  if (flag == 0) {

    inputVal.value = (num1.value + num2.value).toFixed(2) + ''
  } else {
    inputVal.value = (num1.value - num2.value).toFixed(2) + ''
  }

  // 保留小数点后两位


  // 如果运算结果为 负数 直接置0
  if (parseFloat(inputVal.value) < 0) {
    inputVal.value = '0.00'
  }
}

// 选择日期
const date = ref(new Date().getMonth() + 1 + '月' + new Date().getDate() + '日')
const show = ref(false)
function formatDate(date: any) {
  // return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  return `${date.getMonth() + 1}月${date.getDate()}日`
}
// 日期选择完成
function onConfirm(value: any) {
  show.value = false
  date.value = formatDate(value)
  console.log(date.value)
}
// 对日历上的每一个内容进行格式化
function formatter(day: any) {
  const year = day.date.getFullYear()
  const month = day.date.getMonth() + 1
  const date = day.date.getDate()

  const todayDate = new Date()

  const thisYear = todayDate.getFullYear()
  const thisMouth = todayDate.getMonth() + 1
  const thisDate = todayDate.getDate()

  // console.log(year, month, date)
  // console.log(thisYear, thisMouth, thisDate)

  // 标记今天
  if (year === thisYear && month === thisMouth && date === thisDate) {
    day.bottomInfo = '今天'
  }

  // 未来的日期不可选
  const today = new Date(thisYear, thisMouth - 1, thisDate, 23, 59, 59)
  if (day.date > today) {
    day.type = 'disabled'
  }

  // console.log(day)
  return day
}

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);

.oneStroke {
  position: relative;
  height: 100vh;
  width: 100%;
}

.main-t {
  .banner {
    background-color: @gabelBgColor;
  }
}

.main-c {
  .category {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 20px;

    .category-item {
      padding: 11px;
      margin: 10px 30px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .category-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 14vw;
        height: 14vw;
        background-color: rgb(240, 240, 240);
        border-radius: 50%;
      }

      .category-icon.active {
        background-color: @gabelBgColor;
      }

      .category-text {
        font-size: 25px;
        margin-top: 10px;
      }
    }
  }
}

.main-b {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;

  .tool-box {
    display: flex;

    .tool-item {
      font-size: 25px;
      display: flex;
      align-items: center;
      background-color: rgb(240, 240, 240);
      padding: 10px 15px;
      border-radius: 50px;

      .tool-icon {
        width: 40px;
      }
    }
  }

  .enter-box {
    margin-bottom: 0;
    background-color: #fff;
    width: 100%;

    .enter-input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 -30px;
      margin-top: 10px;

      .input {
        width: 60%;
      }

      .amout {
        text-align: right;
        padding-right: 60px;
        font-size: 50px;
        color: red;
      }

      .amout::before {
        content: "￥"
      }
    }

    .enter-num {
      background-color: @gabelBgColor;
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      font-size: 40px;
      width: 100%;

      .enter-key {
        width: 22%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;

        .key-image {
          width: 40px;
        }
      }

      .enter-key-text {
        font-size: 30px;
      }
    }
  }
}
</style>